<template>
  <v-list-item @click="to(item)" :height="height">
    <v-list-item-title>
      <span class="text-subtitle" :aria-label="`第${item.xuhao}首`">{{ item.xuhao }}</span>
      &nbsp;
      <span class="text-title">{{ item.mulu }}</span>
    </v-list-item-title>
    <v-list-item-subtitle>
      <span class="text-subtitle">{{ zanmeiTYpe(item.shijiIndex) }}</span>
    </v-list-item-subtitle>
    <template v-slot:append>
      <v-list-item-action>
        <span v-if="!isad" class="text-sm text-subtitle">暂无音频</span>
      </v-list-item-action>
      <v-list-item-action v-if="item._id === info['_id'] && !paused">
        <ListItemPlayLoading color="rgba(255,255,255,0.8)" />
      </v-list-item-action>
      <span v-if="item.years" class="text-sm text-subtitle">
        {{ item.years }}
      </span>
    </template>

    <slot name="lyric"></slot>
  </v-list-item>
</template>
<script setup name="JcListItem">
import ListItemPlayLoading from "@/components/ListItemPlayLoading.vue";
import { useStore } from "vuex";
import { computed } from "vue";
import { shallowRef } from "vue";

const store = useStore();
const emit = defineEmits(["itemclick", "savemeclick"]);
const typeList = shallowRef([]);
const props = defineProps({
  // 列表的每个item
  item: {
    required: true,
  },
  showType: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "48",
  },
});

const paused = computed(() => {
  return store.state.audio.paused;
});

const info = computed(() => {
  return store.state.audio.info;
});

const isad = computed(() => {
  if (info.isad == void 0) {
    return true;
  }
  return info.isad;
});

if (props.showType) {
  store.dispatch("sgb/getAllShiJiList").then((type) => {
    typeList.value = type;
  });
}

const zanmeiTYpe = computed(() => {
  return (typeId) => {
    let result = "";
    if (typeList.value.length > 0) {
      result = typeList.value.filter((i) => i.id === typeId)[0].name;
    }
    return result;
  };
});
function to(item) {
  emit("itemclick", item);
}
</script>
